<template>
  <div class="sa-container">
    <el-form ref="searchForm" :model="form" label-width="15px">
      <el-row style="margin-top: 6px">
        <el-col :span="22">
          <el-col :span="4">
            <el-form-item prop="name" >
              <el-input v-model.trim="form.name" size="small" clearable
                        placeholder = "搜索内容">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 15px">
            <el-button type="primary" size="small" class="search" icon="el-icon-search" @click="fetchList">搜索</el-button>
            <el-button type="primary" size="small" class="reset" icon="el-icon-refresh" @click="restTable">重置</el-button>
          </el-col>
        </el-col>
        <el-col :span="2" style="text-align: center">
          <el-button type="primary" size="small" class="reset" icon="iconPlus iconfont icon-icon_plus" @click="addHandle">新增角色</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="100%"
        ref="dataTable"
        header-row-class-name="headerClass"
        style="width: 100%">
      <el-table-column
          align="center"
          prop="name"
          label="角色名称"
          min-width="16">
      </el-table-column>
      <el-table-column
          prop="remark"
          align="center"
          label="备注"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          align="center"
          label="更新时间"
          min-width="18">
      </el-table-column>
      <el-table-column
          prop=""
          align="center"
          min-width="8"
          label="操作">
        <template slot-scope="scope">
          <i class="iconfont icon-modify modifyIcon"  @click="modifyHandle(scope.row)"></i>
          <span class="line"></span>
          <i class="iconfont icon-delete deleteIcon" @click="deleteHandle(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="bgColor">
      <el-pagination
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          @current-change="pageFetchList"
          @size-change="pageFetchList"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.total">
      </el-pagination>
    </div>
    <add-role-dialog :show.sync="addRoleDialogShow" @success="pageFetchList" :current-id="currentRoleId" />
  </div>
</template>

<script>
import { table } from '@/common/mixin'
import addRoleDialog from '@/views/settingManage/roleManage/add-role-dialog'
export default {
  name: "RoleList",
  mixins: [table],
  components: {
    addRoleDialog,
  },
  data() {
    return {
      form: {
        name: '',
      },
      currentRoleId: '',
      addRoleDialogShow: false,
    }
  },
  async activated() {
    this.$refs.dataTable.doLayout()
    await this.fetchList()
  },
  async mounted() {
    this.$refs.dataTable.doLayout()
    await this.fetchList()
  },
  computed: {

  },
  methods: {
    async fetchList() {
      await this.tableFetch(this.$api.systemSettings.roleManage.list, JSON.stringify({
        ...this.form,
        ...this.page,
        currentPage: 1,
      }))
      this.page.currentPage = 1;
    },
    async pageFetchList() {
      await this.tableFetch(this.$api.systemSettings.roleManage.list, JSON.stringify({
        ...this.form,
        ...this.page
      }))
    },
    async restTable() {
      await this._restForm('searchForm')
      await this.fetchList();
    },
    addHandle(){
      this.currentRoleId = '';
      this.addRoleDialogShow = true;
    },
    modifyHandle(row) {
      this.currentRoleId = row.id;
      this.addRoleDialogShow = true;
    },
    async deleteHandle(row){
      this.$confirm('确定删除该角色吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$post(this.$api.systemSettings.roleManage.deleteRole, JSON.stringify({
          roleId: row.id
        }))
        this.$alert('删除成功！').then(async() => {
          await this.fetchList()
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
.optionList {
  width: 100%;
  height: 32px;
  color: #435582;
  font-size: 12px;
  padding-left: 10px;
  border-radius: 4px;
  border: 1px solid #CED4DA;
  border-right: 0;
  /*去掉默认的下拉三角*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  /*添加下拉三角图标*/
  background: url("../../../assets/img/typeSelectSmall.png") no-repeat right center transparent;
}

.el-table {
  margin-top: 2px;
  flex: 1;
}

.search-form {
  background-color: #F8FBFF;
}

.el-form-item {
  margin-bottom: 7px !important;
}
.sa-container {
  flex-flow: column;
  display: flex;
}

</style>